<template>
  <div class="ArithDiscern">
    <a-card>
      <a-form :form="form">
        <a-row :getter="30">
          <a-col :span="8">
            <a-form-item
              label="算法名称"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 12, offset: 1 }"
            >
              <a-input
                placeholder="请输入"
                v-decorator="[
          'algorithmName',
          {rules: [{ required: true, message: '请输入算法名称!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              label="算法识别码"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 12, offset: 1}"
            >
              <a-input
                placeholder="请输入"
                v-decorator="[
          'algorithmImsi',
          {rules: [{ required: true, message: '请输入算法识别码!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8" style="text-align:right">
            <a-button type="primary" @click="getfindPage">查询</a-button>
            <a-button type="dashed" @click="listExport">导出</a-button>
            <a-button htmlType="reset">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-button type="primary" icon="plus" @click="showModal">新建</a-button>
      <a-table
        style="margin-top:2%"
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :rowKey="record => record.id"
      >
        <template slot="algorithmName"></template>
        <template slot="operate" slot-scope="text">
          <span class="del" @click="showDeleteConfirm(text)">删除</span>
        </template>
      </a-table>
    </a-card>
    <a-modal
      title="新建算法识别码"
      :visible="visible"
      @ok="handleOk"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      v-model="visible"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
      <a-form :form="form">
        <a-form-item label="算法名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'arithmeticName',
          {rules: [{ required: true, message: '请输入算法名称!' }]} 
        ]"
          />
        </a-form-item>
        <a-form-item label="算法识别码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
          <a-input
            placeholder="请输入"
            v-decorator="[
          'arithmeticId',
          {rules: [{ required: true, message: '请输入算法名称!' }]}
        ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "算法名称",
    dataIndex: "name",
    key: "algorithmName",
    scopedSlots: { customRender: "algorithmName" },
    align: "center"
  },
  {
    title: "算法识别码",
    dataIndex: "code",
    key: "algorithmImsi",
    scopedSlots: { customRender: "algorithmImsi" },
    align: "center"
  },
  {
    title: "商品数量",
    dataIndex: "goodsNumber",
    key: "goodsNum",
    scopedSlots: { customRender: "goodsNum" },
    align: "center"
  },
  {
    title: "创建时间",
    key: "creationTime",
    dataIndex: "createTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    key: "operate",
    scopedSlots: { customRender: "operate" },
    align: "center"
  }
];
export default {
  name: "ArithDiscern",
  data() {
    return {
      form: this.$form.createForm(this),
      data: [],
      columns,
      ModalText: "算法名称",
      visible: false,
      confirmLoading: false,
      loading: false,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 5,
        defaultCurrent: 5,
        current: 1,
        total: 500
      }
    };
  },
  created() {
    this.listInit();
    this.getfindPage();
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.confirmLoading = true;
      this.listSave();
      this.visible = false;
      this.confirmLoading = false;
    },
    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.getfindPage();
    },
    showDeleteConfirm(text) {
      var that = this;
      this.delId = text.id;
      // console.log(this.delId);
      this.$confirm({
        title: "确认删除",
        content: "确认要删除此商品识别码吗？",
        okText: "确定",
        cancelText: "取消",
        iconType: "close-circle",
        // okButtonProps: {
        //   props: { disabled: true }
        // },
        onOk() {
          that.listDel(that.delId);
          console.log("OK");
        },
        onCancel() {
          console.log("Cancel");
        }
      });
    },
    // 初始化
    listInit() {
      this.axios
        .post(this.baseUrl + "/algorithmIdentificationCode/listInit", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 新建信息
    listSave() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/algorithmIdentificationCode/save", {
          name: values.arithmeticName,
          code: values.arithmeticId,
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          if (response.data.code == 0) {
            this.$message.info("新建算法成功");
            this.getfindPage();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 展示查询数据
    getfindPage() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/algorithmIdentificationCode/findPageListByCondition",
          {
            pageNum: this.pagination.current,
            pageSize: this.pagination.pageSize,
            name: values.algorithmName,
            code: values.algorithmImsi,
            loginToken: this.$store.state.loginToken
          }
        )
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 删除操作
    listDel(id) {
      this.axios
        .post(this.baseUrl + "/algorithmIdentificationCode/del", {
          id: id,
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          console.log(response);
          this.getfindPage();
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 导出操作
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/algorithmIdentificationCode/export",
          {
            name: values.algorithmName,
            code: values.algorithmImsi,
            loginToken: this.$store.state.loginToken
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "算法识别码表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ArithDiscern {
  width: 100%;
}
.del {
  color: red;
  cursor: pointer;
}
.ant-btn {
  margin-left: 15px;
}
</style>
